<%- include('../layout/head.ejs', {pageConf})%>

<div id="index">
  <!-- 头部导航 -->
  <%- include('../common/header.ejs', {pageConf})%>
  <!-- 搜索框 -->
  <div class="search-wrap">
    <div class="search">
      <div class="weui-search-bar" id="searchBar" style="background-color: #FF852A;">
        <form class="weui-search-bar__form">
          <div class="weui-search-bar__box"  style="background-color: #FF852A">
            <i class="weui-icon-search"></i>
            <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="输入关键词搜索" required="" style="padding-left: 10px;">
            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
          </div>
          <label class="weui-search-bar__label" id="searchText">
            <i class="weui-icon-search" style="color: #000;"></i>
            <span style="color: #666; font-weight: 700;">请输入您要搜索的商品</span>
          </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel" style="color: #fff;">取消</a>
      </div>
    </div>
  </div>

  <!-- 轮播图 -->
  <div class="swiper-wrap" style="width: 100vw;">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <% swiperUrlData.forEach(item => {%>
        <div class="swiper-slide">
          <img src="<%= item%>" alt="首页推荐轮播" style="width: 100%">
        </div>
        <% }) %>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

    </div>
  </div>
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      direction: 'horizontal', // 垂直切换选项
      loop: true, // 循环模式选项
      speed: 300,
      grabCursor: true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      }
    })
  </script>


  <!-- 分类 -->
  <div class="big-sort-wrap">
    <div class="big-sort">
      <!-- 分类导航 -->
      <div class="weui-grids" style="background-color: #fff;">
        <% pageConf.classifications.forEach(item => {%>
        <a href="" class="weui-grid js_grid">
          <p class="weui-grid__label">
            <span class="font-span">
              <%= item.title%>
            </span>
          </p>
        </a>
        <% }) %>
      </div>
    </div>
  </div>

  

  <!-- 商品推荐 -->
  <div class="recoment-product-list-wrap clearfix">
    <ul class="recoment-prod-list clearfix">
      <% prodsArr.forEach(prod => { %>
      <a href="/shop/product-detail/<%= prod.pid%>">
        <li class="list-item">
          <div class="list-item-img-wrap" style="height: 150px; overflow: hidden;;">
            <img src="<%= qiniuImgUrl + prod.pImgUrlKey%>" alt="<%= prod.pName%>" style="width: 100%;" />
          </div>
          <div class="info">
            <div class="p-title ellipsis">
              商品：<%= prod.pName%>
            </div>
            <div class="price">
              价格：<span>￥<%= prod.pPrice%></span>
            </div>
            <div>
              编号：<%= prod.pid%>
            </div>
            <div class="ellipsis">
              介绍：<%= prod.pIntro%>
            </div>
            <div style="display: <%= prod.pPurchased === 0 ? 'none' : 'block'%> ">
              <%=  prod.pPurchased%> 人 已购买
            </div>
            <div>
              上架时间：<%= '2020.3.12'%>
            </div>
          </div>
        </li>
      </a>
      <% }) %>
    </ul>
  </div>

</div>


<%- include('../layout/foot.ejs', { pageConf })%>